<template>
  <div id="addClass">
    <h1>新增班级</h1>
    <div id="contentBox">
      <label for="">班级名称</label>
      <el-input
        placeholder="请输入班级名称"
        v-model="classData.name"
        clearable>
      </el-input>
    </div>
    <div id="checkBox">
      <p>
        <label for="">负责教师</label>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" border>全选</el-checkbox>
      </p>
      <el-checkbox-group v-model="classData.teachers" @change="handleCheckedTeachersChange">
        <el-checkbox v-for="item in teacherData" :label="item._id" :key="item._id" border :value='item._id'>{{item.name}}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div>
      <el-button type="primary" plain @click="open">确认新增</el-button>
    </div>
  </div>
</template>

<script>
import api from '@/http/api/apis'
import { createNamespacedHelpers } from 'vuex'
const { mapActions:classMapActions } = createNamespacedHelpers('classStore')
const { mapState:teacherMapState,mapActions:teacherMapActions } = createNamespacedHelpers('teacher')

export default {
  computed:{
    ...teacherMapState(['teacherData']),
    //计算属性 缓存 单独 提取教师id 并缓存
    allteachers(){
      const teachers = []
      for (let item of this.teacherData){
        teachers.push(item._id)
      }
      return teachers
    },
  },
  data() {
    return {
      classData:{
        name:'',
        teachers:[],
      },
      checkAll: false,
      isIndeterminate: false,
    };
  },
  mounted(){
    this.getTeacher();
  },
  methods: {
    ...classMapActions(['addClass']),
    ...teacherMapActions(['getTeacher']),

    handleCheckAllChange(val) {
      this.classData.teachers = val ? this.allteachers : [];
      this.isIndeterminate = false;
    },
    handleCheckedTeachersChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.allteachers.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.allteachers.length;
    },
    open() {
      this.$confirm("确认新增班级?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          console.log(this.classData);
          const { data } = await api.classApi.addClass(this.classData);
          console.log('----------');

          if (data.status) {
            console.log(data);
            this.$message({
              type: "success",
              message: data.message,
            });
          } else {
            this.$message({
              type: "error",
              message: data.message,
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消新增！",
          });
        });
    },
  },
};
</script>

<style lang='scss' scoped> 
div#addClass{
  display: flex;
  flex-direction: column;
  align-items: center;

  div#contentBox{
    display: flex;
    justify-content:center;
  }

  label{
    width:120px;
    margin:0 10px 0 0;
  }

  div#checkBox{
    margin-bottom:15px;
    text-align:left;    
  }

}
</style>